<template>
  <div class="slider-hot-article bgWhite slider-card">
    <CardTitle>
      <template slot="title">热门</template>
    </CardTitle>
    <div class="slider-box">
      <div class="slider-hot-article_item" v-for="(item,index) in list" :key="index">
        <div class="slider-hot-article_item-img" :style="'background-image: url('+item.cimg+');'">
          <!-- <img :src="item.cimg" alt=""> -->
        </div>
        <div class="slider-hot-article_item-desc">
          <nuxt-link :to="'/essay/'+item.cid" tag="h4" class="slider-hot-article_item-desc-title Line2">{{item.ctitle}}</nuxt-link>
          <!-- <h4 class="slider-hot-article_item-desc-title Line2">{{item.ctitle}}</h4> -->
          <p class="slider-hot-article_item-desc-footer">{{item.type?item.type.typename:'其它'}} · {{item.createdAt.split("T")[0]}}</p>
        </div>
      </div>
      <a-skeleton :loading="loading" active :paragraph="{ rows: 2 }"></a-skeleton>
    </div>

  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import config from "../utils/config";
@Component({})
export default class HelloWorld extends Vue {
  list: Array<any> = [];
  loading: boolean = true;
  created() {
    this.loadList();
  }
  async loadList() {
    const res = await this.$axios.$get(config.BASE_URL + "/api/article/hot");
    this.loading = false;
    this.list = res.d;
  }
}
</script>
<style lang="scss" scoped>
.slider-hot-article {
  &_item {
    display: flex;
    align-items: center;
    height: 90px;
    border-bottom: 1px solid rgba(192, 238, 243, 0.42);
    &:last-child {
      border-bottom: none;
    }
    &-img {
      width: 85px;
      height: 55px;
      border-radius: 2px;
      overflow: hidden;
      margin-right: 5px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-desc {
      flex: 1;
      &-title {
        font-size: 15px;
        line-height: 1.1;
        cursor: pointer;
      }
      &-footer {
        margin: 0;
        font-size: 13px;
      }
    }
  }
}
</style>
